<template>
  <div>
    <input
      type="text"
      v-model='name'
      placeholder='哈哈哈'
    >
    <h1>this is a parent{{name}}</h1>
    <!-- <my-child
      qqq='123'
      www='456'
      :aaa='name'
      @qqfn='setName'
    /> -->
    <!-- <my-child :list='list' /> -->
    <mychild2
      qq='111'
      www='222'
      eee='333'
    />
    <my-input
      v-model='name'
      placeholder='哈哈哈'
      @keyup.13="submit"
      @click='clk'
      @wew='clk'
    />
    <my-input
      :value='name'
      @input='v=>name=v'
    />
  </div>
</template>
<script>
// @ is an alias to /src
/* 
  父传子使用自定义属性 :xxx='aa'   props
  子传父使用自定义事件 @xxx='aa'   $emit
 
  vuex

  $attrs/$listeners
    :$attrs 存储的是 没有被props接受的那些父传子传进来的属性
    $listeners 存储的是父组件传过来的所有的自定义事件

  provide/inject  provide 提供数据 所有的后代组件都可以通过inject使用

  eventBus  创建一个空的vue实例 用来$on存放在组件中的定义的各种事件

  this.$children/this.$parent  ref  这三种方式都是直接通过获取组建的方式活得对应组建的数据



*/
import mychild from "./components/child.vue";
import mychild2 from "./components/child2.vue";
import mychild3 from "./components/my-input.vue";

export default {
  provide() {
    return {
      age: 100,
    };
  },
  data() {
    return {
      name: "珠峰",
      list: [
        {
          t: 1,
          children: [
            {
              t: 11,
            },
          ],
        },
        {
          t: 2,
        },
        {
          t: 3,
          children: [
            {
              t: 31,
              children: [
                {
                  t: 311,
                },
                {
                  t: 312,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  components: {
    "my-child": mychild,
    mychild2,
    "my-input": mychild3,
  },
  methods: {
    setName(val) {
      this.name = val;
    },
    qq() {
      console.log(6666);
    },
    fn(v) {
      this.name = v;
    },
    submit() {
      console.log(666);
    },
    clk() {
      console.log("dianji");
    },
  },
};
</script>
<style lang="less">
</style>